
<template>
  <div class="login">
    <div class="login-header">
      <span
        class="login-header-left"
        @click="change('mima')"
        :class="mima == 'mima' ? 'active' : ''"
        >密码登录</span
      >
      <span
        class="login-header-right"
        @click="change('shouji')"
        :class="mima == 'shouji' ? 'active' : ''"
        >手机验证登录</span
      >
    </div>

    <div class="login-content" v-if="mima == 'shouji'">
      <div class="login-content-input">
        <input type="text" placeholder="请输入手机号" v-model="phone" />
      </div>
      <div class="login-content-input">
        <input type="text" placeholder="请输入验证码" v-model="yanzhengmanum" />
      </div>
      <div class="login-content-btn" @click="yanzhengma">获取验证码</div>

      <div class="login-content-btn" @click="loginbutton">登录</div>
    </div>
    <div class="login-content" v-else>
      <div class="login-content-input">
        <input type="text" placeholder="请输入手机号" v-model="phone" />
      </div>
      <div class="login-content-input">
        <input type="text" placeholder="请输入密码" v-model="password" />
      </div>

      <div class="login-content-btn" @click="loginbutton">登录</div>
    </div>
    <div class="login-content-other">
      <span>忘记密码</span>
      <span @click="zhuce">注册</span>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { Store, useStore } from "vuex";
// import { useRouter } from "vue-router";
const store = useStore();
const yanzhengmanum = ref("");
// const router = useRouter();
const phone = ref("");
const password = ref("");
const mima = ref("mima");

// 切换
const change = (val) => {
  mima.value = val;
};
//获取验证码
const yanzhengma = async () => {
  const reg = /^1[3456789]\d{9}$/;
  if (reg.test(phone.value)) {
    await store.dispatch("loginVerificationcode", phone.value);
    console.log(store.state.Verificationcode);
    yanzhengmanum.value = store.state.Verificationcode;
  } else {
    alert("手机号格式不正确");
    return false;
  }
};
//登录
const loginbutton = async () => {
  if (password.value) {
    await store.dispatch("loginpassword", {
      phone: phone.value,
      password: password.value,
    });
  } else {
    await store.dispatch("loginverify", {
      phone: phone.value,
      yanzhengmanum: yanzhengmanum.value,
    });
  }
  if (store.state.token) {
    uni.setStorageSync("token", store.state.token);
    uni.switchTab({
      url: "/pages/index/index",
    });
    console.log("token:" + uni.getStorageSync("token"));
  }
};

//跳转注册
const zhuce = () => {
  uni.navigateTo({
    url: "/pages/signIn/signIn",
  });
};
</script>


<style lang="scss" scoped>
.active {
  color: #ff464e;
}
.login {
  padding-top: var(--status-bar-height);
  background-color: #fff;
  .login-header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #ccc;

    .login-header-left {
      font-size: 18px;
    }
    .login-header-right {
      font-size: 18px;
    }
  }
  .login-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .login-content-input {
      width: 80%;
      height: 50px;
      border-bottom: 1px solid #ccc;
      input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        font-size: 16px;
      }
    }
    .login-content-btn {
      width: 80%;
      height: 50px;
      margin-top: 50px;
      background-color: #ff464e;
      color: #fff;
      font-size: 18px;
      text-align: center;
      line-height: 50px;
      border-radius: 5px;
    }
  }
  .login-content-other {
    width: 80%;
    height: 50px;
    margin-top: 20px;
    margin: 0 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      color: #ff464e;
      font-size: 16px;
    }
  }
}
</style>
